<template>
  <div class="page-header-index-wide">
    <!-- <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="总库存" :total="`${allStock}`">
          <a-tooltip title="今日库存" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <trend flag="up" style="margin-right: 16px;margin-top: 14px">
              <span slot="term">今日入库数量</span>
              {{ todayIn }}
            </trend>
          </div>
          <template slot="footer">
            <trend flag="down" style="margin-right: 16px">
              <span slot="term">今日出库数量</span>
              {{ todayOut }}
            </trend></template
          >
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="规格" :total="`0`" height="410" :isShowTotal="false">
          <a-tooltip title="各个规格对应的库存数量" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <vue-seamless-scroll
              v-if="reSpecList.length > 0"
              :data="reSpecList"
              class="seamless-warp"
              :class-option="{
                step: 0.3,
              }"
            >
              <div class="item-ul">
                <div v-for="(item, i) in reSpecList" :key="i" class="item-li">
                  <div class="item-title">{{ item.spec }}</div>
                  <div class="item-num">{{ item.amount }}</div>
                </div>
              </div>
            </vue-seamless-scroll>
            <a-empty v-if="reSpecList.length === 0" />
          </div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="批次" :total="`0`" height="410" :isShowTotal="false">
          <a-tooltip title="各个批次对应的库存数量" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <vue-seamless-scroll
              v-if="reBatchList.length > 0"
              :data="reBatchList"
              class="seamless-warp"
              :class-option="{
                step: 0.3,
              }"
            >
              <div class="item-ul">
                <div v-for="(item, i) in reBatchList" :key="i" class="item-li">
                  <div class="item-title">{{ item.spec }}</div>
                  <div class="item-num">{{ item.amount }}</div>
                </div>
              </div>
            </vue-seamless-scroll>
            <a-empty v-if="reBatchList.length === 0" />
          </div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="库位" :total="`0`" height="410" :isShowTotal="false">
          <a-tooltip title="各个库位对应的库存数量" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <vue-seamless-scroll
              v-if="rePositionList.length > 0"
              :data="rePositionList"
              class="seamless-warp"
              :class-option="{
                step: 0.3,
              }"
            >
              <div class="item-ul">
                <div v-for="(item, i) in rePositionList" :key="i" class="item-li">
                  <div class="item-title">{{ item.position }}</div>
                  <div class="item-num">{{ item.amount }}</div>
                </div>
              </div>
            </vue-seamless-scroll>
            <a-empty v-if="rePositionList.length === 0" />
          </div>
        </chart-card>
      </a-col>
    </a-row> -->
    <a-row :gutter="[12, 12]" style="position: relative">
      <div style="display: flex; justify-content: space-between; padding: 0 6px 12px 6px">
        <div v-for="(l, i) in topList" :key="i" style="width: 19%">
          <div class="top-statistics">
            <div class="center">
              <div>
                <img class="img" :src="l.icon" />
              </div>
              <div>{{ l.label }}</div>
            </div>
            <div class="top-data">
              <CountTo :startVal="0" :endVal="l.num" :separator="``" :duration="duration" />
            </div>
            <div v-if="i == 4" class="full-btn">
              <img class="img" src="/static/icon/full-btn.png" @click="fullClick" />
            </div>
          </div>
        </div>
      </div>
    </a-row>
    <a-row>
      <a-col :sm="24" :md="24" :xl="24">
        <div class="good-line-warp">
          <s-chart v-if="reSpecList.length > 0" width="100%" height="300" :option="goodOption" />
          <a-empty v-if="reSpecList.length === 0" style="margin-top: 100px" />
        </div>
      </a-col>
    </a-row>

    <!-- <div style="display: flex; width: 100%">
      <div style="display: flex; flex-wrap: wrap; width: 75%">
        <div style="background-color: red; width: 25%; height: 100px">1</div>
        <div style="background-color: pink; width: 50%; height: 100px">2</div>
        <div style="background-color: blue; width: 25%; height: 100px">3</div>
        <div style="background-color: yellow; width: 25%; height: 100px">4</div>
      </div>
      <div style="display: flex; width: 25%">
        <div style="background-color: green; width: 100%; height: 200px">3</div>
      </div> 
    </div> -->

    <a-row :gutter="[12, 12]">
      <div style="display: flex; flex-wrap: wrap">
        <div style="width: 100%">
          <a-col :sm="24" :md="12" :xl="6">
            <div class="order-list-wrap" style="height: 320px">
              <chart-card :loading="loading" title="出库订单" :total="`0`" height="250" :isShowTotal="false">
                <a-tooltip title="待出库订单" slot="action">
                  <a-icon type="info-circle-o" />
                </a-tooltip>
                <div>
                  <vue-seamless-scroll
                    v-if="outOrderList.length > 0"
                    :data="outOrderList"
                    class="seamless-warp"
                    style="height: 230px"
                    :class-option="{
                      step: 0.3,
                    }"
                  >
                    <div class="item-ul">
                      <div v-for="(item, i) in outOrderList" :key="i" class="item-li">
                        <div class="item-title">{{ item.orderNo }}</div>
                        <div class="item-num" :style="item.state == 4 ? ' backgroundColor:#dadada; color:#fff;' : ''">
                          {{ outOrderStates[item.state] ? outOrderStates[item.state].text : '' }}
                        </div>
                      </div>
                    </div>
                  </vue-seamless-scroll>
                  <a-empty v-if="outOrderList.length === 0" />
                </div>
              </chart-card>
            </div>
          </a-col>
          <a-col :sm="24" :md="12" :xl="10">
            <div class="order-list-wrap" style="height: 320px">
              <chart-card :loading="loading" title="出库规格" :total="`0`" height="250" :isShowTotal="false">
                <a-tooltip title="今日出库规格" slot="action">
                  <a-icon type="info-circle-o" />
                </a-tooltip>
                <div>
                  <vue-seamless-scroll
                    v-if="outOrderList.length > 0"
                    :data="outOrderList"
                    class="seamless-warp"
                    style="height: 230px"
                    :class-option="{
                      step: 0.3,
                    }"
                  >
                    <div class="item-ul">
                      <div v-for="(item, i) in outOrderList" :key="i" class="item-li">
                        <div class="item-title">{{ item.orderNo }}</div>
                        <div class="item-num">
                          {{ outOrderStates[item.state] ? outOrderStates[item.state].text : '' }}
                        </div>
                      </div>
                    </div>
                  </vue-seamless-scroll>
                  <a-empty v-if="outOrderList.length === 0" />
                </div>
              </chart-card>
            </div>
          </a-col>

          <a-col :sm="24" :md="12" :xl="4">
            <div class="order-list-wrap" style="height: 320px">
              <chart-card :loading="loading" title="出货公司" :total="`0`" height="250" :isShowTotal="false">
                <a-tooltip title="出货公司排名" slot="action">
                  <a-icon type="info-circle-o" />
                </a-tooltip>
                <div>
                  <vue-seamless-scroll
                    v-if="outOrderList.length > 0"
                    :data="outOrderList"
                    class="seamless-warp"
                    style="height: 230px"
                    :class-option="{
                      step: 0.3,
                    }"
                  >
                    <div class="item-ul">
                      <div v-for="(item, i) in outOrderList" :key="i" class="item-li">
                        <div class="item-title">{{ item.orderNo }}</div>
                        <div class="item-num">
                          {{ outOrderStates[item.state] ? outOrderStates[item.state].text : '' }}
                        </div>
                      </div>
                    </div>
                  </vue-seamless-scroll>
                  <a-empty v-if="outOrderList.length === 0" />
                </div>
              </chart-card>
            </div>
          </a-col>

          <a-col :sm="24" :md="12" :xl="4">
            <div class="order-list-wrap" style="height: 320px; flex: 2">
              <chart-card :loading="loading" title="寄售库" :total="`0`" height="250" :isShowTotal="false">
                <a-tooltip title="待出库订单" slot="action">
                  <a-icon type="info-circle-o" />
                </a-tooltip>
                <div>
                  <vue-seamless-scroll
                    v-if="outOrderList.length > 0"
                    :data="outOrderList"
                    class="seamless-warp"
                    style="height: 230px"
                    :class-option="{
                      step: 0.3,
                    }"
                  >
                    <div class="item-ul">
                      <div v-for="(item, i) in outOrderList" :key="i" class="item-li">
                        <div class="item-title">{{ item.orderNo }}</div>
                        <div class="item-num" >
                          {{ outOrderStates[item.state] ? outOrderStates[item.state].text : '' }}
                        </div>
                      </div>
                    </div>
                  </vue-seamless-scroll>
                  <a-empty v-if="outOrderList.length === 0" />
                </div>
              </chart-card>
            </div>
          </a-col>

          <!-- <a-col :sm="24" :md="12" :xl="6">
        <div class="order-list-wrap" style="height: 320px">
          <chart-card :loading="loading" title="出库订单" :total="`0`" height="250" :isShowTotal="false">
            <a-tooltip title="待出库订单" slot="action">
              <a-icon type="info-circle-o" />
            </a-tooltip>
            <div>
              <vue-seamless-scroll
                v-if="outOrderList.length > 0"
                :data="outOrderList"
                class="seamless-warp"
                style="height: 230px"
                :class-option="{
                  step: 0.3,
                }"
              >
                <div class="item-ul">
                  <div v-for="(item, i) in outOrderList" :key="i" class="item-li">
                    <div class="item-title">{{ item.orderNo }}</div>
                    <div class="item-num">
                      {{ outOrderStates[item.state] ? outOrderStates[item.state].text : '' }}
                    </div>
                  </div>
                </div>
              </vue-seamless-scroll>
              <a-empty v-if="outOrderList.length === 0" />
            </div>
          </chart-card>
        </div>
      </a-col> -->
        </div>
        <div style="width: 100%">
          <a-col :sm="24" :md="12" :xl="6">
            <div class="order-list-wrap">
              <chart-card :loading="loading" title="入库订单" :total="`0`" height="290" :isShowTotal="false">
                <a-tooltip title="待入库订单" slot="action">
                  <a-icon type="info-circle-o" />
                </a-tooltip>
                <div>
                  <vue-seamless-scroll
                    v-if="inOrderList.length > 0"
                    :data="inOrderList"
                    class="seamless-warp"
                    style="height: 270px; flex: 1; align-self: flex-start"
                    :class-option="{
                      step: 0.3,
                    }"
                  >
                    <div class="item-ul">
                      <div v-for="(item, i) in inOrderList" :key="i" class="item-li">
                        <div class="item-title">ID：{{ item.orderNo }}</div>
                        <div class="item-num" :style="item.state == 4 ? ' backgroundColor:#dadada; color:#fff;' : ''">
                          {{ inOrderStates[item.state] ? inOrderStates[item.state].text : '' }}
                        </div>
                      </div>
                    </div>
                  </vue-seamless-scroll>
                  <a-empty v-if="inOrderList.length === 0" />
                </div>
              </chart-card>
            </div>
          </a-col>
          <a-col :sm="24" :md="12" :xl="10">
            <a-card :loading="loading" :bordered="false" title="最近一周访问量统计">
              <a-row>
                <a-col :span="6">
                  <head-info title="今日IP" :content="loginfo.todayIp"></head-info>
                </a-col>
                <a-col :span="2">
                  <a-spin class="circle-cust">
                    <a-icon slot="indicator" type="environment" style="font-size: 24px" />
                  </a-spin>
                </a-col>
                <a-col :span="6">
                  <head-info title="今日访问" :content="loginfo.todayVisitCount"></head-info>
                </a-col>
                <a-col :span="2">
                  <a-spin class="circle-cust">
                    <a-icon slot="indicator" type="team" style="font-size: 24px" />
                  </a-spin>
                </a-col>
                <a-col :span="6">
                  <head-info title="总访问量" :content="loginfo.totalVisitCount"></head-info>
                </a-col>
                <a-col :span="2">
                  <a-spin class="circle-cust">
                    <a-icon slot="indicator" type="rise" style="font-size: 24px" />
                  </a-spin>
                </a-col>
              </a-row>
              <line-chart-multid :fields="visitFields" :dataSource="visitInfo"></line-chart-multid>
            </a-card>
          </a-col>

          <a-col :sm="24" :md="12" :xl="4">
            <div class="order-list-wrap">
              <chart-card :loading="loading" title="操作员" :total="`0`" height="290" :isShowTotal="false">
                <a-tooltip title="操作员排名" slot="action">
                  <a-icon type="info-circle-o" />
                </a-tooltip>
                <div>
                  <vue-seamless-scroll
                    v-if="inOrderList.length > 0"
                    :data="inOrderList"
                    class="seamless-warp"
                    style="height: 270px; flex: 1; align-self: flex-start"
                    :class-option="{
                      step: 0.3,
                    }"
                  >
                    <div class="item-ul">
                      <div v-for="(item, i) in inOrderList" :key="i" class="item-li">
                        <div class="item-title">ID：{{ item.orderNo }}</div>
                        <div class="item-num">
                          {{ inOrderStates[item.state] ? inOrderStates[item.state].text : '' }}
                        </div>
                      </div>
                    </div>
                  </vue-seamless-scroll>
                  <a-empty v-if="inOrderList.length === 0" />
                </div>
              </chart-card>
            </div>
          </a-col>

          <!-- <a-col :sm="24" :md="12" :xl="4">
            <div class="location-situation-wrap">
              <s-chart width="100%" height="420" :option="locationOption" />
            </div>
          </a-col> -->
        </div>
      </div>
    </a-row>
  </div>
</template>

<script>
import ChartCard from '@/components/ChartCard'
import ACol from 'ant-design-vue/es/grid/Col'
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import HeadInfo from '@/components/tools/HeadInfo.vue'

import Trend from '@/components/Trend'
import { getLoginfo, getVisitInfo } from '@/api/api'
import { mapState } from 'vuex'
const rankList = []
for (let i = 0; i < 7; i++) {
  rankList.push({
    name: '白鹭岛 ' + (i + 1) + ' 号店',
    total: 1234.56 - i * 100,
  })
}
const barData = []
for (let i = 0; i < 12; i += 1) {
  barData.push({
    x: `${i + 1}月`,
    y: Math.floor(Math.random() * 1000) + 200,
  })
}
import CountTo from 'vue-count-to'
export default {
  name: 'IndexChart',
  components: {
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    LineChartMultid,
    HeadInfo,
    CountTo,
  },
  data() {
    return {
      loading: true,
      center: null,
      rankList,
      barData,
      loginfo: {},
      visitFields: ['ip', 'visit'],
      visitInfo: [],
      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
      duration: 3000,
      // topList: [
      //   {
      //     label: '今日出库量',
      //     icon: '/static/icon/out-warehouse.png',
      //     num: 1234,
      //   },
      //   {
      //     label: '今日入库量',
      //     icon: '/static/icon/in-warehouse.png',
      //     num: 1234,
      //   },
      //   {
      //     label: '规格品类',
      //     icon: '/static/icon/classification.png',
      //     num: 1234,
      //   },
      //   {
      //     label: '商品总库存',
      //     icon: '/static/icon/inventory.png',
      //     num: 3214,
      //   },
      // ],
    }
  },
  computed: {
    ...mapState({
      reSpecList: (s) => s.visualized.reSpecList,
      reBatchList: (s) => s.visualized.reBatchList,
      rePositionList: (s) => s.visualized.rePositionList,
      allStock: (s) => s.visualized.allStock,
      todayIn: (s) => s.visualized.todayIn,
      todayOut: (s) => s.visualized.todayOut,
      inOrderList: (s) => s.visualized.inOrderList,
      outOrderList: (s) => s.visualized.outOrderList,
      inOrderStates: (s) => s.order.inOrderStates,
      outOrderStates: (s) => s.order.outOrderStates,
    }),
    topList() {
      const { allStock, reSpecList, todayIn, todayOut } = this
      return [
        {
          label: '所属仓库',
          icon: '/static/icon/inventory.png',
          num: allStock,
        },
        {
          label: '今日出库量',
          icon: '/static/icon/out-warehouse.png',
          num: todayOut,
        },
        {
          label: '今日入库量',
          icon: '/static/icon/in-warehouse.png',
          num: todayIn,
        },
        {
          label: '规格品类',
          icon: '/static/icon/classification.png',
          num: reSpecList.length,
        },
        {
          label: '商品总库存',
          icon: '/static/icon/inventory.png',
          num: allStock,
        },
      ]
    },
    goodOption() {
      const { reSpecList } = this
      let list = reSpecList.filter((item) => item.amount > 100)

      return {
        grid: {
          left: 10,
          bottom: 0,
          right: 20,
          top: 30,
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: list.map((e) => e.spec),
          axisLabel: {
            rotate: -45,
          },
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: list.map(function (e) {
              return e.amount
            }),
            barWidth: 10,

            itemStyle: {
              color: '#55ccc6',
            },
            label: {
              show: true,
              position: 'top',
            },
            type: 'bar',
          },
        ],
        dataZoom: [
          {
            // 设置滚动条的隐藏与显示
            show: true,
            // 设置滚动条类型
            type: 'slider',
            // 设置背景颜色
            // backgroundColor: 'rgb(19, 63, 100)',
            // 设置选中范围的填充颜色
            // fillerColor: 'rgb(16, 171, 198)',
            // 设置边框颜色
            // borderColor: 'rgb(19, 63, 100)',
            // 是否显示detail，即拖拽时候显示详细数值信息
            showDetail: false,
            // 数据窗口范围的起始数值
            startValue: 0,
            // 数据窗口范围的结束数值（一页显示多少条数据）
            endValue: 5,
            // empty：当前数据窗口外的数据，被设置为空。
            // 即不会影响其他轴的数据范围
            filterMode: 'empty',
            // 设置滚动条宽度，相对于盒子宽度
            width: '30%',
            // 设置滚动条高度
            height: 12,
            // 设置滚动条显示位置
            left: 'center',
            // 是否锁定选择区域（或叫做数据窗口）的大小
            zoomLoxk: true,
            // 控制手柄的尺寸
            handleSize: 0,
            // dataZoom-slider组件离容器下侧的距离
            bottom: 1,
            startValue: 0, // 从头开始。
            endValue: 15, // 最多15个
          },
          {
            // 没有下面这块的话，只能拖动滚动条，
            // 鼠标滚轮在区域内不能控制外部滚动条
            type: 'inside',
            // 滚轮是否触发缩放
            zoomOnMouseWheel: false,
            // 鼠标滚轮触发滚动
            moveOnMouseMove: true,
            moveOnMouseWheel: true,
          },
        ],
      }
    },
    locationOption() {
      const { rePositionList } = this
      const angle = 0
      const value = ((rePositionList.length / (58 * 5 * 10)) * 100).toFixed(1)
      return {
        // backgroundColor: '#061740',
        title: [
          {
            text: '库位使用率',
            x: 18,
            y: 18,
          },
          {
            text: '{a|' + value + '}{c|%}',
            x: 'center',
            y: 'center',
            textStyle: {
              rich: {
                a: {
                  fontSize: 42,
                  color: '#333',
                  fontWeight: 'bold',
                },
                c: {
                  fontSize: 42,
                  color: '#333',
                  fontWeight: 'normal',
                },
              },
            },
          },
        ],
        series: [
          //内环
          // {
          //   name: '',
          //   type: 'custom',
          //   coordinateSystem: 'none',
          //   renderItem: function (params, api) {
          //     return {
          //       type: 'arc',
          //       shape: {
          //         cx: api.getWidth() / 2,
          //         cy: api.getHeight() / 2,
          //         r: (Math.min(api.getWidth(), api.getHeight()) / 2.3) * 0.65,
          //         startAngle: ((0 + -angle) * Math.PI) / 180,
          //         endAngle: ((360 + -angle) * Math.PI) / 180,
          //       },
          //       style: {
          //         stroke: '#FAAD14',
          //         fill: 'transparent',
          //         lineWidth: 0.5,
          //       },
          //       silent: true,
          //     }
          //   },
          //   data: [0],
          // },
          //外环
          {
            name: '',
            type: 'pie',
            radius: ['70%', '60%'],
            silent: true,
            clockwise: true,
            startAngle: 90,
            z: 0,
            zlevel: 0,
            label: {
              normal: {
                position: 'center',
              },
            },
            data: [
              {
                value: value,
                name: '',
                itemStyle: {
                  normal: {
                    //外环发光
                    borderWidth: 0.5,
                    shadowBlur: 20,
                    borderColor: '#FAAD14',
                    shadowColor: '#FAAD14',
                    color: {
                      // 圆环的颜色
                      colorStops: [
                        {
                          offset: 0,
                          color: '#FAAD14', // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#FAAD14', // 100% 处的颜色
                        },
                      ],
                    },
                  },
                },
              },
              {
                value: 100 - value,
                name: '',
                label: {
                  normal: {
                    show: false,
                  },
                },
                itemStyle: {
                  normal: {
                    color: '#ffffff',
                  },
                },
              },
            ],
          },
        ],
      }
    },
  },
  created() {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
    this.initLogInfo()
  },
  methods: {
    fullClick() {
      const name = 'data-page-full'
      if (document.body.className.indexOf(name) > -1) {
        document.body.classList.remove(name)
      } else {
        document.body.classList.add(name)
      }
    },
    initLogInfo() {
      getLoginfo(null).then((res) => {
        if (res.success) {
          Object.keys(res.result).forEach((key) => {
            res.result[key] = res.result[key] + ''
          })
          this.loginfo = res.result
        }
      })
      getVisitInfo().then((res) => {
        if (res.success) {
          this.visitInfo = res.result
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;

  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    color: rgba(0, 0, 0, 0.45);
    display: inline-block;
    font-size: 0.95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }
  p {
    line-height: 42px;
    margin: 0;
    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}
.seamless-warp {
  height: 230px;
  overflow: hidden;
}
.location-situation-wrap {
  height: 420px;
  background-color: #fff;
}
.item-ul {
  .item-li {
    display: flex;
    align-items: center;
    font-size: 18px;
    line-height: 34px;
    .item-title {
      flex: 1;
      font-weight: 650;
    }
    .item-num {
      font-size: 12px;
      margin: 10px 0px;
      padding: 0 8px;
      border-radius: 10px;
    }
  }
}
.top-statistics {
  background-color: #fff;
  padding: 12px;
  text-align: center;
  position: relative;
  z-index: 0;
  .top-data {
    font-size: 28px;
    font-weight: 650;
  }
  .center {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    .img {
      width: 32px;
      margin-right: 12px;
    }
  }
}
.good-line-warp {
  background-color: #fff;
  height: 320px;
  overflow: hidden;
}
.order-list-wrap {
  background-color: #fff;
  height: 420px;
}
/deep/ .ant-card {
  .ant-card-body {
    padding-bottom: 0;
  }
}
.full-btn {
  position: absolute;
  right: 10px;
  top: 10px;
  .img {
    width: 24px;
    cursor: pointer;
  }
}
</style>

